<template>
  <div class="dishs-container">
    <div class="container">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        :inline="false"
        label-width="180px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号:" prop="username">
          <el-input
            v-model="ruleForm.username"
            placeholder="请输入账号"
            maxlength="21"
          />
        </el-form-item>
        <el-form-item label="员工姓名:" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入员工姓名"
            maxlength="20"
          />
        </el-form-item>

        <el-form-item label="手机号:" prop="phone">
          <el-input
            v-model="ruleForm.phone"
            placeholder="请输入手机号"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号:" prop="idNumber">
          <el-input
            v-model="ruleForm.idNumber"
            placeholder="请输入身份证号"
            maxlength="20"
          />
        </el-form-item>
        <div class="subBox address">
          <el-form-item>
            <el-button @click="$router.push('/employee')"> 取消 </el-button>
            <el-button type="primary" @click="submitForm('ruleForm', false)">
              保存
            </el-button>
            <el-button
              v-if="actionType === 'add'"
              type="primary"
              class="continue"
              @click="submitForm('ruleForm', true)"
            >
              保存并继续添加
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getEmployeeById } from "@/api/employee";
export default {
  name: "Add",
  data() {
    return {
      status: "",
      ruleForm: {
        username: "",
        name: "",
        phone: "",
        sex: "1",
        idNumber: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 20, message: "长度在3-20个字符", trigger: "blur" },
        ],
        // 姓名
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        // 手机号
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        // 身份证号
        idNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            min: 18,
            max: 18,
            message: "请输入正确的身份证号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    actionType() {
      return this.$route.query.id ? "edit" : "add";
    },
  },
  created() {
    if (this.actionType === "edit") {
      this.init();
    }
  },
  methods: {
    async init() {
      const { data } = await getEmployeeById(this.id);
      this.ruleForm = data;
    },

    submitForm(formName, st) {
      // console.log(formName)
      const id = this.id;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            ...this.ruleForm,
          };
          if (this.actionType === "add") this.$store.commit("addData", params);
          else this.$store.commit("editData", { id, params });
          alert("保存成功");
          // console.log(this.data)
          if (!st) {
            this.$router.push("/employee");
          } else {
            this.ruleForm = {
              username: "",
              name: "",
              phone: "",
              sex: "男",
              idNumber: "",
              status: "0",
            };
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

      <style lang="scss" scoped>
.dishs {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
